<template>
  <!-- <div> -->
  <!-- <div class="app-container home" style="background:rgba(255, 255, 255, .3);"> -->
    <div style="width: 100%;height: 100%;">
    <div style="margin-bottom: 10px; margin-top: 0px;color: red;"><span>终端首页配置缩略图，点击以下范围区域弹框配置即可</span></div>
    <div class="pageBack" :style="bgStyle" style="margin-left: 10px;margin-right: 10px;width: 98%;height: 100%;">
      <div class="header" @click="clickOpen(7)">
        <div class="header-left">
          <img class="logo-img" mode="aspectFill" src="../sysFirst/js/index-logo.png" />
        </div>
        <div class="header-right" @click.stop="clickWeather()">
          <span>{{ currentTimePeriod }} {{ currentTime }}</span>
        </div>
      </div>

      <div class="main-content">
        <!-- 左侧播放器 -->
        <div id="player" class="main-player remoter">
          <span style="color: white;">视频播放界面</span>
        </div>

        <!-- 右侧 -->
        <div class="content-right">
          <div class="right-imgTop">
            <div class="right-imgBox">
              <img :src="sysFirstList && sysFirstList[1] && sysFirstList[1].value1" @click.stop="clickOpen(3)" />
            </div>
            <div class="right-imgBox" >
              <img :src="sysFirstList && sysFirstList[3] && sysFirstList[3].value1" @click.stop="clickOpen(5)" />
            </div>
          </div>
          <div class="right-imgBottom">
            <div class="right-imgBox" >
              <img :src="sysFirstList && sysFirstList[2] && sysFirstList[2].value1" @click.stop="clickOpen(4)" />
            </div>
            <div class="right-imgBox">
              <img class="remoter" :src="sysFirstList && sysFirstList[4] && sysFirstList[4].value1"
                @click.stop="clickOpen(6)" />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航栏 -->
      <div class="nav-bar">
        <div class="nav-content">
          <div v-for="(item, index) in navImages" :key="item.text" class="nav-item" @click.stop="clickImg(item.text)">
          <img :src="item.src" />
        </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import bus from './js/util.js'
export default {
  name: "indexPage",
  props: {
    sysFirstList: {
      type: Array,
      default: [],
    }
  },
  data() {
    return {
      recos: [],
      curObj: {},
      timer: null,
      system: 'tv',
      timerlogin: null,
      liveUrl: '', // 直播地址
      player: null,
      currentTime: '', // 添加时间数据
      currentWeekday: '',
      currentDate: '',
      timeTimer: null, // 用于清理定时器
      text1: '您好，欢迎光临音王政企',
      text2: '',
      weather: {},
      navImages: [
        { src: require('../sysFirst/js/app1.png'), text: '直播电视', name: 'app1' },
        { src: require('../sysFirst/js/app2.png'), text: '影视中心', name: 'app2' },
        { src: require('../sysFirst/js/app3.png'), text: '纯音乐享', name: 'app3' },
        { src: require('../sysFirst/js/app4.png'), text: '投屏', name: 'app4' },
        { src: require('../sysFirst/js/app5.png'), text: '应用中心', name: 'app5' },
        { src: require('../sysFirst/js/app6.png'), text: '企业介绍', name: 'app6' },
      ]
    }
  },
  computed:{
    bgStyle() {
      const sysFirstList = this.sysFirstList && this.sysFirstList.length > 5 ? this.sysFirstList[5] : null;
      if (!sysFirstList) {
        return {};
      } else if (sysFirstList.value2 == 0) {
        return {
          background: sysFirstList.value1
        }
      } else if (sysFirstList.value2 == 1) {
        return {
          backgroundImage: `url('${sysFirstList.value1}')`,
          backgroundPosition: '0% 0%',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat'
        }
      }

    },
    currentTimePeriod() {
      const hours =  String(new Date().getHours());
      const period = hours < 12 ? '上午' : '下午';
      return period;
    },
  },
  created() {
    // 初始化时间
    this.updateTime()
    // 启动时间更新定时器
    this.timeTimer = setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  mounted() {
    bus.$on("getCityWeather", (val) => {
      this.weather = val
    });
  },
  beforeDestroy() {
    // 清理时间更新定时器
    if (this.timeTimer) {
      clearInterval(this.timeTimer)
      this.timeTimer = null
    }
  },
  methods: {
    clickWeather(){
      bus.$emit("clickWeather");
    },
    clickOpen(id) {
      this.$emit('handleUpdate', { id: id })
    },
    clickImg(text) {
      if (text == '企业介绍') {
        this.clickOpen(8)
      }
    },
    // 更新时间的方法
    updateTime() {
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      this.currentTime = `${hours}:${minutes}`
      const weekdayArray = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekdayIndex = now.getDay();
      this.currentWeekday = weekdayArray[weekdayIndex];
      this.currentDate = this.getYMD(new Date())
    },
    getYMD() {
      var tmpDate = new Date()
      var year = tmpDate.getFullYear()
      var month = (tmpDate.getMonth() + 1) >= 10 ? (tmpDate.getMonth() + 1) : '0' + (tmpDate.getMonth() + 1)
      var date = tmpDate.getDate() >= 10 ? tmpDate.getDate() : '0' + tmpDate.getDate()
      var curDate = year + '-' + month + '-' + date
      return curDate
    }
  }
}
</script>

<style lang="less" scoped>
.pageBack {
  width: 85%;
  margin: 0 auto;
  color: white;
  background: linear-gradient(to bottom, rgb(34, 28, 28), rgb(69, 59, 58));
  padding: 0 20px;
  box-sizing: border-box;

.header {
    height: 12vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 0;

    .header-left {
      display: flex;
      align-items: center;

      .logo-img {
        width: 200px;
        height: 140px;
        margin-left: -1vw;
      }


    }

    .header-right {
      display: flex;
      align-items: center;
      font-size: 18px;

      span+span {
        margin-left: 5px;
      }
    }
  }

  .main-content {
    // height: 350px;
    display: flex;
    justify-content: space-between;
    // align-items: center;

    .main-player {
      width: 55%;
      overflow: hidden;
      border: 2px solid transparent;
      background-color: black;

      .live-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        /* 禁止视频交互 */
      }
    }

    .currentFocus {
      border: 2px solid #1b99c7 !important;
    }

    .content-right {
      margin-left: 20px;
      width: 38%;
      flex: 1;

      .scroll-box {
        width: 100%;
        /* 可根据实际情况调整宽度 */
        overflow: hidden;
        white-space: nowrap;
        position: relative;
      }

      .text1 {
        margin-bottom: 10px;
        cursor: pointer;
      }

      .scroll-box span {
        display: inline-block;
        animation: scroll 10s linear infinite;
      }

      @keyframes scroll {
        0% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(-100%);
        }
      }

      .right-imgTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right-imgBox {
          width: 178px;
          height: 135px;
          border: 2px solid transparent;

          img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            cursor: pointer;
          }

          .img-text {
            text-align: center;
          }
        }
      }

      .right-imgBottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .right-imgBox {
          width: 178px;
          height: 135px;
          border: 2px solid transparent;

          img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
            cursor: pointer;
          }

          .img-text {
            text-align: center;
          }


        }

      }

    }

  }
}


.info-item image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.info-item text {
  display: none;
}


.nav-bar {
  height: 15vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 20px;

  .currentFocus {
    border-radius: 5px;
    border: 2px solid #358aaa !important;
  }

    .nav-content {
      width: 92%;
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .nav-item {
        box-sizing: border-box;
        border: 2px solid transparent;
      }
  
      .nav-item img {
        width: 55px;
        height: 70px;
      }
    }
}

/* 保持响应式布局 */
@media screen and (max-width: 1600px) {
  .main-player {
    width: 700px;
    height: 320px;
  }

  .side-icons {
    height: 450px;
  }

  .info-item {
    height: 160px;
  }
}

@media screen and (max-width: 1366px) {
  .main-player {
    width: 600px;
    height: 380px;
  }

  .side-icons {
    height: 400px;
  }

  .info-item {
    height: 140px;
  }
}
</style>